<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>倒计时</title>
    <style>
      .box {
        box-sizing: border-box;
        width: 600px;
        height: 300px;
        box-shadow: 5px 5px 25px 1px lightblue;
        /* filter: contrast(1.6); */
        position: absolute;
        left: calc(50% - 300px);
        top: calc(50% - 150px);
        text-align: center;
        border-radius: 20px;
        animation: move 0.5s infinite alternate;
      }

      p {
        font-family: '楷体';
        text-shadow: 2px 2px 2px;
      }
      p:first-of-type {
        margin-top: 80px;
        font-size: 50px;
      }

      .time {
        font-size: 35px;
      }

      @keyframes move {
        0% {
          transform: translate(0px);
        }

        100% {
          transform: translate(100px);
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <p>距离新的一年，还有</p>
      <p class="time"></p>
    </div>
    <script>
      var time = document.querySelector('.time');
      var body = document.querySelector('body');

      function getTime() {
        setInterval(function () {
          var nowTime = new Date();
          var targetTime = new Date('2023-01-01 00:00:00');
          var rest = targetTime.getTime() - nowTime.getTime();
          var restDays = Math.floor(rest / 1000 / 60 / 60 / 24);
          restDays = restDays < 10 ? '0' + restDays : restDays;
          var restHours = Math.floor((rest / 1000 / 60 / 60) % 24);
          restHours = restHours < 10 ? '0' + restHours : restHours;
          var restMinutes = Math.floor((rest / 1000 / 60) % 60);
          restMinutes = restMinutes < 10 ? '0' + restMinutes : restMinutes;
          var restSeconds = Math.floor((rest / 1000) % 60);
          time.innerHTML = `${restDays} 天 ${restHours} 时 ${restMinutes} 分 ${restSeconds} 秒 `;
          time.style.color = `rgba(${getColor(0, 255)},0.8)`;
          body.style.backgroundColor = `rgba(${getColor(0, 255)},0.1)`;
        }, 500);
      }
      getTime();

      // 取任意区间的颜色值，取区间随机数
      function getColor(x, y) {
        let max = Math.max(x, y);
        let min = Math.min(x, y);
        let a = Math.floor(Math.random() * (max - min + 1));
        let b = Math.floor(Math.random() * (max - min + 1));
        let c = Math.floor(Math.random() * (max - min + 1));
        // 原来不能改变颜色区间的代码
        // let a = parseInt(Math.random() * 255);
        // let b = parseInt(Math.random() * 255);
        // let c = parseInt(Math.random() * 255);
        return `${a},${b},${c}`;
      }
      console.log(getColor());
    </script>
  </body>
</html>
